这篇内容是在有道云旧笔记基础上重新整理的 JavaScript 与前端开发 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

  • 前端业务中需要快速处理数据、DOM、浏览器能力或通用工具函数时参考。
  • 把散落在项目里的小技巧抽成可复用代码片段，减少重复实现。
  • 排查兼容性和边界输入问题前，先用本文示例确认核心思路。

核心要点 ​

  • 正文以代码或命令片段为主，阅读时建议先确认目标问题，再挑选对应片段验证。
  • 保留了 3 段可直接参考的代码或命令，主要涉及 javascript，复制前需要按当前项目路径、版本和变量名做调整。
  • 文中保留了 1 个导出图片资源，适合和文字步骤一起对照查看。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

//HTML
<div class="menu menu-click self-click">
  <span class="sort-btn list asc">上架时间</span>
  <span class="sort-btn list desc">使用人数</span>
</div>
// CSS
.sort-menu .sort-btn {
  position: relative;
  padding-right: 10px;
  cursor: pointer;
}
.sort-menu .sort-btn:before, .sort-menu .sort-btn:after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 0;
  height: 0;
  font-size: 0;
  border: solid 5px transparent;
  border-right-width: 4px;
  border-left-width: 4px;
  overflow: hidden
}
.sort-menu .sort-btn:before {
  transform: translateY(calc(-50% - 6px))
}
.sort-menu .sort-btn:after {
  transform: translateY(calc(-50% + 6px))
}
/* .sort-menu .sort-btn.on:before {
  border-color: var(--zhuluan-primary-color) transparent transparent transparent;
} */
.sort-menu .sort-btn[class*='asc']:not(.desc, .on):before {
  border-bottom-color: var(--zhuluan-primary-color);
}
.sort-menu .sort-btn[class*='asc']:not(.desc, .on):after {
  border-top-color: var(--zhuluan-custom-a8-color);
}
.sort-menu .sort-btn[class*='asc'][class*='on']:not(.desc):after {
  border-top-color: var(--zhuluan-primary-color);
}
.sort-menu .sort-btn[class*='asc'][class*='on']:not(.desc):before {
  border-bottom-color: var(--zhuluan-custom-a8-color);
}
.sort-menu .sort-btn[class*='desc']:not(.asc, .on):before {
  border-bottom-color: var(--zhuluan-custom-a8-color);
}
.sort-menu .sort-btn[class*='desc']:not(.asc, .on):after {
  border-top-color: var(--zhuluan-primary-color);
}
.sort-menu .sort-btn[class*='desc'][class*='on']:not(.asc):after {
  border-top-color: var(--zhuluan-custom-a8-color);
}
.sort-menu .sort-btn[class*='desc'][class*='on']:not(.asc):before {
  border-bottom-color: var(--zhuluan-primary-color);
}
// CSS优化
.sort-menu .sort-btn[class*='asc']:not(.desc, .on):before,
.sort-menu .sort-btn[class*='desc'][class*='on']:not(.asc):before
{
  border-bottom-color: var(--zhuluan-primary-color);
}
.sort-menu .sort-btn[class*='asc']:not(.desc, .on):after, 
.sort-menu .sort-btn[class*='desc'][class*='on']:not(.asc):after
{
  border-top-color: var(--zhuluan-custom-a8-color);
}
.sort-menu .sort-btn[class*='asc'][class*='on']:not(.desc):after,
.sort-menu .sort-btn[class*='desc']:not(.asc, .on):after
{
  border-top-color: var(--zhuluan-primary-color);
}
.sort-menu .sort-btn[class*='desc']:not(.asc, .on):before,
.sort-menu .sort-btn[class*='asc'][class*='on']:not(.desc):before
{
  border-bottom-color: var(--zhuluan-custom-a8-color);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
/*开关的大小*/
.switch-container {
  height: var(--zhuluan-switch-size);
  width: var(--zhuluan-switch-box);
}
/*设置checkbox不显示*/
/* .switch {
  display: none;
} */
label, label:before, label:after {
  display: block;
}
label {
  position: relative;
  background-color: var(--zhuluan-custom-e8-color);
  height: 100%;
  width: 100%;
  cursor: pointer;
  border-radius: 25px;
}
label:before, label:after {
  content: '';
}
/*在label标签内容之前添加如下样式，形成一个未选中状态*/
label:before {
  border-radius: 25px;
  height: 100%;
  width: var(--zhuluan-switch-size);
  background-color: var(--zhuluan-white-color);
  opacity: 1;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
  -webkit-transition: all 0.2s;
}
/*在label标签内容之后添加如下样式，形成一个选中状态*/
label:after {
  position: absolute;
  top: 0;
  right: 0;
  left: var(--zhuluan-switch-size);
  
  border-radius: 25px;
  height: 100%;
  width: var(--zhuluan-switch-size);
  background-color: white;
  opacity: 0;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
  transition: opacity 0.2s ease;
}
/* ~ 兄弟选择符。
 p~ul ：位于 p 元素之后的所有 ul 元素
*/
/*选中后，选中样式显示*/
#switch:checked~label:after {
  opacity: 1;
}
/*选中后，未选中样式消失*/
#switch:checked~label:before {
  opacity: 0;
}
/*选中后label的背景色改变*/
#switch:checked~label {
  background-color: var(--zhuluan-primary-color);
}

实践检查清单 &#8203;

  • 把示例函数放进业务前，先补齐空值、异常输入、异步失败和浏览器兼容性测试。
  • 通用工具函数应尽量收敛到项目公共模块，避免多个页面复制出不同版本。
  • 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。

复盘小结 &#8203;

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。